<template>
  <view class="edit-password">
    <view class="info-form">
      <view class="input-box">
        <input type="password" placeholder="请输入密码" v-model="password" @change="updatePassword" />
      </view>
      <view class="input-box">
        <input type="password" placeholder="请再次输入密码" v-model="confirmPassword" @change="updateConfirmPassword" />
      </view>
    </view>
    <view class="page-bottom-btn" @click="submit()">确定</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      confirmPassword: ''
    }
  },
  methods: {
    updatePassword(e) {
      this.password = e.detail.value;
    },
    updateConfirmPassword(e) {
      this.confirmPassword = e.detail.value;
    },
    submit() {
      const self = this;
      if (!self.password) {
        uni.showToast({
          icon: 'none',
          title: '请输入密码'
        })
        return
      }
      if (self.password !== self.confirmPassword) {
        uni.showToast({
          icon: 'none',
          title: '两次输入的不一致'
        })
        return
      }
      self.saveUserInfo()
    },
    saveUserInfo() {
      const self = this;
      uni.request({
        url: '/user/modify',
        method: 'POST',
        data: {
          password: self.password
        },
        success(result) {
          if (result.data.success) {
            uni.showToast({
              icon: 'success',
              title: '保存成功'
            })
            self.goBack()
          }
        }
      });
    },
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style scoped lang="scss">
.edit-password {
  padding: 60rpx 115rpx;
  height: 100vh;
  background-color: $white;
}
.info-form {
  .input-box {
    position: relative;
    margin-top: 40rpx;
    border-bottom: 2rpx solid $border-base;
    padding: 20rpx;
  }
}
</style>
